<template>
  <div class="final-warning warning-wrapper">
    <p class="ge-title-one has-des">财务预警</p>
   <!--<img @click="showTip" class="final-tip" :src="require('@/assets/tip@2x.png')"/>-->
    <div class="title-des">{{this.warningDesc}}</div>
    <van-collapse v-model="activeNames" accordion>
    <van-collapse-item name="1" >
      <div slot="title">
        <p class="ge-title-two">财务异常科目</p>
        <div v-if="abSubject.length > 0" class="final-collapse-des">资产软、负债硬；合并差异藏猫腻</div>
      </div>

      <van-row class="final-index">
        <template v-if="abSubject.length > 0">
          <van-cell v-for="(item, index) in abSubject" :key="'subject'+ index" :title="item.risk_desc" @click="showDesc(item.explain)" :is-link="!!item.explain" />    
        </template>
        <div v-if="abSubject.length === 0" class="bdl"><div class="no-sentiment-info"><img class="no-data" :src="require('@/assets/noAbSuject@2x.png')"/></div></div>
      </van-row>
      <!--
       <van-steps direction="vertical" :active="-1">
        <van-step>
          <div>对本期营业收入净利润影响大的财务科目：</div>
          <p>母公司与合并报表其他应收款差别过大 母公司与合并报表其他应付款差别过大 应收票据及应收账款/总资产 过大</p>
        </van-step>
        <van-step>
          <div>对本期营业收入净利润影响大的财务科目：</div>
          <p>母公司与合并报表其他应收款差别过大 母公司与合并报表其他应付款差别过大 应收票据及应收账款/总资产 过大</p>
        </van-step>
        <van-step>
          <div>本期变动异常的重要财务科目：无</div>
        </van-step>
      </van-steps>
      -->
    </van-collapse-item>
    <van-collapse-item
      name="2"
    >
      <div slot="title">
        <p class="ge-title-two">财务指标</p>
        <div class="final-collapse-des" v-if="indexList.length > 0">与行业均值进行对比，偏离平均值比较多的值得关注</div>
      </div>

      <van-row class="final-index">
        <template v-if="indexList.length > 0">
          <van-cell v-for="(item, index) in indexList" :key="'index'+ index" :title="item.risk_desc" @click="showDesc(item.explain)" :is-link="!!item.explain" />
        </template>
        <div v-if="indexList.length === 0" class="bdl"><div  class="no-sentiment-info"><img class="no-data" :src="require('@/assets/noAbIndex@2x.png')"/></div></div>
      </van-row>
    </van-collapse-item>
   
     <van-collapse-item
      name="3"
    >
      <div slot="title"><p class="ge-title-two">财务异常数据</p></div>
      <van-row class="warning-list">
        <template v-if="abData.length > 0">
          <van-cell 
            v-for="(item, index) in abData"
            :key="index + 'data'"
          >
            <div class="warning-item-title">{{item.first_item_name}}<span class="red">{{item.first_item_value}}</span></div>
            <div class="warning-item-des">{{item.second_item_name}} <span class="red">{{item.second_item_value}}</span></div>
            <!--
              <div class="warning-item-title">现金及县级你等价物占总资产比例下降<span class="red">9.00%</span></div>
            <div class="warning-item-des">现金及现金等价物 <span class="red">13,3000,804.28</span>万元</div>
              -->
          </van-cell>
        </template>
        <div v-if="abData.length === 0" class="bdl"><div class="no-sentiment-info"><img class="no-data" :src="require('@/assets/noAbData@2x.png')"/></div></div>
      </van-row>
    </van-collapse-item>
  </van-collapse>
  <!--
    <van-row type="flex" justify="space-between" align="center">
      <van-col span="12">
        <p class="ge-title-two">财务异常科目</p>
      </van-col>
      <van-col span="2" style="text-align:right;">
        <van-icon name="arrow-down" color="#CCCCCC" style="top:2px;"/>
      </van-col>
    </van-row>
  --> 
  </div>
</template>

<script>
import Vue from 'vue';
import { Dialog, Icon,  Row, Col, Collapse, CollapseItem, Step, Steps, List } from 'vant';
import { financeWarning } from '@/api/warning';

Vue.use(Dialog).use(Icon).use(Row).use(Col).use(Collapse).use(CollapseItem).use(Step).use(Steps).use(List);
export default {
  name: 'FinancialWarning',
  data() { 
    return {
      activeNames: '1',
      abData: [], // 财务异常list
      abSubject: [], // 财务异常科目
      indexList: [], // 财务指标
      warningDesc: ''
    };
  },
  mounted(){
    financeWarning().then((res) => {
      const list = res.data.data_list;
      this.warningDesc = res.data.finance_warning_desc;
      // 财务异常科目
      this.abSubject = this.filterData(list, 'financial_abnormality_subject');
      // 财务指标
      this.indexList = this.filterData(list, 'financial_index');
      // 财务异常数据
      this.abData = this.filterData(list, 'financial_abnormality_data');
    })
  },
  
  methods: {
    filterData(list, key) {
      const subject = list.filter((item) => { 
        return item.item_name === key;
      });
      if(subject.length > 0) {
        return subject[0].item_value;
      } 
      return [];
    },
    showDesc(msg) {
      if(!msg) {
        return false;
      }
      Dialog.alert({
        title: '词条解释',
        message: msg,
        confirmButtonText: '我知道了'
      }).then(() => {
        // on close
      });
    },
    showTip() {
      if(!this.warningDesc) {
        return false;
      }
      Dialog.alert({
        title: '提示',
        message: this.warningDesc,
        confirmButtonText: '我知道了'
      }).then(() => {
        // on close
      });
    }
  }
};
</script>

<style>
.title-des{
  color: #BCBCBC;
  font-size: 14px;
  padding: 0px 0 15px;
}
.has-des{
  margin-bottom: 5px;
}
.final-tip{
  width: 15px;
  height: 15px;
  position: relative;
  width: 15px;
  height: 15px;
  top: 2px
}
.red{
  color: red;
}
.warning-wrapper{
  /* height: 100vh; */
  padding: 0 15px;
  text-align: left;
}
.final-warning .van-collapse-item .van-collapse-item__title{
   align-items: center;
   padding:0;
}

.final-warning .van-steps--vertical {
    padding: 0 0 0 30px;
}
.final-warning .van-cell:not(:last-child)::after{
  left:0;
}
.final-warning .van-collapse-item__content{
  padding:0;
}
.final-warning .van-step--vertical .van-step__circle {
    left: -21px;
    top: 10px;
}
.final-warning .van-step .van-step__circle{
  width:14px;
  height:14px;
  background:rgba(212,182,134,1);
  border-radius:50%;
}
.van-dialog{
  width:320px !important;;
}
.van-dialog .van-dialog__header{
  font-size: 17px;
  font-weight: bold;
  padding-top: 28px;
}
.van-dialog .van-dialog__message{
  font-size:17px ;
  color:#757679 ;
  line-height: 26px ;
  padding: 23px 31px 26px;
}
.van-dialog .van-dialog__confirm, .van-dialog .van-dialog__confirm:active {
    color: #D4B686;
}

.final-collapse-des {
  font-size:12px;
  color:#BCBCBC;
  position: relative;
  top: -7px;
}
.final-index{
  list-style: disc inside;
}

.final-index .van-cell::before{
  content:"●";
  color:#E4D6C0;
  font-size: 5px;
}
.final-index .van-cell{
 font-size: 14px;
  color:#C29854;
  padding: 6px 0 6px 12px;
  background: #FAF4E9;
  font-size: 14px;
  border: 1px solid #E9DBC2;
  border-radius:4px;
  margin: 9px 0;
}
.final-index .van-cell__title {
  padding-left:10px;
}
.final-index .van-cell__right-icon{
    padding-right: 5px;
    color: #E9DBC2;
}

.warning-list .van-cell::before{
  content:"●";
  color:#E4D6C0;
  font-size: 5px;
}


.warning-list .van-cell {
  padding: 15px 6px;
}
.warning-list .van-cell::before{
  content:"●";
  color:#E4D6C0;
  font-size: 5px;
}
.warning-item-title {
  padding-left: 10px;
  font-size: 14px;
  line-height: 23px;
  color: #222222;
}
.warning-item-des {
  font-size: 12px;
  line-height: 16px;
  color: #757679;
  padding-top: 3px;
  padding-left: 10px;
}

.warning-item-subtitle{
  padding-left: 10px;
  font-size: 13px;
  color:#757679;
}
.warning-item-info{
  padding-left: 10px;
  font-size: 12px;
  color:#222222;
}
</style>